<template>
  <div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'

let xLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
let dataValue = [10, 20, 75, 13, 18, 73, 11, 15, 8, 9, 72, 15];
let dataValue2 = [30, 75, 95, 42, 71, 93, 36, 54, 29, 32, 98, 49]
let dataValue3 = [4, 7, 3, 2, 1, 5, 5, 2, 5, 3, 9, 7]
// 获取 dom 实例
const target = ref(null)

// echarts 实例变量
let mChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  mChart = echarts.init(target.value)
  // 渲染 echarts
  renderChart()
})


// 渲染图表
const renderChart = () => {
  const options = {
    title: {
      text: '巴以冲突事件与和平谈判以及国际援助次数',
      left: 'center',
      top: '3%',
      
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 25,
      }
    },

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: 'rgb(126,199,255)',
        },
      },
    },
    legend: {
      show: true,
      top: '15%',
      itemWidth: 30, // 图例标记的图形宽度。
      //   itemGap: 20, // 图例每项之间的间隔。
      itemHeight: 10, //  图例标记的图形高度。
      textStyle: {
        color: '#fff',
        fontSize: 14,
        padding: [0, 8, 0, 8]
      }
    },
    grid: {
      top: '30%',
      left: '30%',
      right: '8%',
      bottom: '20%',
    },
    xAxis: [
      {
        type: 'category',
        // boundaryGap: false,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: 'rgb(41,188,245)',
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: '#FFFFFF',
            fontSize: 12,
          },
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#233653',
          },
        },
        axisTick: {
          show: false,
        },
        data: xLabel,
      },
    ],
    yAxis: [
      {
        name: "受到国际援助次数",
        position: "left",
        offset: 0,
        nameLocation: 'center',
        nameTextStyle: {
          color: "#FDA050",
          fontSize: 12,
          padding: [0, 60, 0, 0]
        },
        nameGap: 50,
        // minInterval: 1,
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: '#FDA050',
            type: 'dashed'
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#FDA050',
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#FDA050',
            fontSize: 14
          }
        },
        axisTick: {
          show: false,
        },
      },
      {
        name: "和平谈判次数",
        position: "left",
        offset: 90,
        nameLocation: 'center',
        nameTextStyle: {
          color: "#cab6eb",
          fontSize: 12,
          padding: [0, 60, 0, 0]
        },
        nameGap: 50,
        inverse: false,
        // minInterval: 1,
        type: 'value',
        splitLine: {
          show: false,
          lineStyle: {
            color: '#1160a0',
            type: 'dashed'
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#cab6eb',
          },
        },
        axisLabel: {
          show: true,
          formatter: '{value}',
          textStyle: {
            color: '#cab6eb',
            fontSize: 14
          }
        },
        axisTick: {
          show: false,
        },
      },
      {
        name: "冲突事件数量",
        position: "left",
        offset: 180,
        nameLocation: 'center',
        nameTextStyle: {
          color: "#008de7",
          fontSize: 12,
          padding: [0, 60, 0, 0]
        },
        nameGap: 50,
        inverse: true,
        // minInterval: 1,
        type: 'value',
        splitLine: {
          show: false,
          lineStyle: {
            color: '#1160a0',
            type: 'dashed'
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#008de7',
          },
        },
        axisLabel: {
          show: true,
          formatter: '{value}',
          textStyle: {
            color: '#008de7',
            fontSize: 14
          }
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '受到国际援助次数',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        smooth: true,
        lineStyle: {
          z: 1,
          normal: {
            width: 3,
            color: '#fb6663', // 线条颜色
          },
        },
        itemStyle: {
          normal: {
            color: '#fd8180',//拐点颜色
            label: {
              show: false, //开启显示
              color: '#fff',
              position: 'top', //在上方显示
              formatter: function (res) {
                if (res.value) {
                  return res.value + "人"
                } else {
                  return 0
                }
              },
            },
          },

        },
        symbolSize: 8,   //设定实心点的大小

        data: dataValue,
      },
      {
        name: '和平谈判次数',
        type: 'line',
        yAxisIndex: 1,
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        smooth: true,
        lineStyle: {
          z: 1,
          normal: {
            width: 3,
            color: '#cab6eb', // 线条颜色
          },
        },
        itemStyle: {
          normal: {
            color: '#cab6eb',//拐点颜色
            label: {
              show: false, //开启显示
              color: '#cab6eb',
              position: 'bottom', //在下方显示
              padding: [0, 0, 0, 10],
              z: 999,
              formatter: function (res) {
                if (res.value) {
                  return Math.round((res.value / 823) * 10000) / 100 + "%"
                } else {
                  return 0
                }
              },
            },
          },

        },
        symbolSize: 8,   //设定实心点的大小

        data: dataValue3,
      },
      {
        name: '冲突事件数量',
        type: 'bar',
        yAxisIndex: 2,

        barWidth: 14,
        lineStyle: {
          z: 1,
          normal: {
            width: 3,
            color: '#008de7', // 线条颜色
          },
        },
        itemStyle: {
          normal: {
            color: '#008de7',//拐点颜色
            label: {
              show: false, //开启显示
              color: '#008de7',
              position: 'bottom', //在下方显示
              padding: [0, 0, 0, 10],
              z: 999,
              formatter: function (res) {
                if (res.value) {
                  return Math.round((res.value / 823) * 10000) / 100 + "%"
                } else {
                  return 0
                }
              },
            },
          },

        },
        symbolSize: 8,   //设定实心点的大小

        data: dataValue2,
      },
    ]
  };
  mChart.setOption(options)
}

// 监听数据的变化，重新渲染图表
// watch(
//   () => regions,
//   () => {
//     renderChart()
//   }, {
//   deep: true
// }

// )
</script>

<style lang="scss" scoped></style>
